<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
        <!-- 7、题目描述
        用jQuery编程实现获取选中复选框值的函数abc
        HTML结构如下： -->
    
        <!-- <div>
            <input type="checkbox" name="aa" value="0" />0
            <input type="checkbox" name=" aa " value="1" />1
            <input type="checkbox" name=" aa " value="2" />2
            <input type="checkbox" name=" aa " value="3" />3
            <input type="button" onclick="abc()" value="提 交" />
            <div id="allselect"></div>
        </div> -->
        
        <!-- <script>    
            console.log(`======= 第7题 =======`);
            (function abc() {
                $(':checkbox').each(
                    function () {
                        console.log($(this).val());
                    }
                )
            }())
            
        </script> -->


        <!-- 8、题目描述
        实现sel函数显示当前选项的文本和值 -->
        <!-- <div>
            <form name="a">
                <select name="a" size="1" onchange="_sel(this)">
                <option value="a">1</option>
                <option value="b">2</option>
                <option value="c">3</option>
                </select>
            </form>
        </div> -->
        
        <!-- <script> 
        console.log(`======= 第8题 =======`);
            function _sel() {
                console.log('文本：'+$('option:selected').val()+'; 值：'+$('option:selected').text());
            }
        </script> -->

        
        <!-- 9、题目描述
        要求用jQuery完成:  点击id为btn的按钮
        
        a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。
        
        b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示
        
        HTML结构如下： -->
        <!-- <div>
            用户名：<input type="text" id="username"/><br/>
            密  码：<input type="password" id="password"/><br/>
           确认密码：<input type="password" id="password1"/><br/>
            <button id="btnSubmit" type="button">提交</button><br/>
        </div> -->

        <!-- <script> 
            console.log(`======= 第9题 =======`);
            $('#btnSubmit').click(
                function () {
                    if ($('#username').val() == '') {
                        alert('用户名不能为空');
                    }
                    if ($('#password').val().length < 6) {
                        alert('你输入的密码长度不可以少于6位');
                    }
                }
            )
        </script> -->

        
        <!-- 10、题目描述
        
        在下面的HTML文档中，编写函数test() ,实现如下功能：
        
        （1）当多行文本框中的字符数超过20个，只截取20个字符
        
        （2）在id为number的td中显示文本框的字符个数
        
        HTML结构如下： -->
        <table>
            <tr>
                <td>留言</td>
                <td id="number"> 0 </td>
            </tr>
            <tr>
                <td colspan=2>
                    <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
                </td>
            </tr>
        </table>
        
        <script> 
        console.log(`======= 第10题 =======`);
        function test(){
            var txt = $('#feedBack').val().substring(0,20);
            var len = $('#feedBack').val().length;
            $('#feedBack').val(txt);
            len <= 20 ? $('#number').text(len) : $('#number').text(20)
        }
        </script>

</body>

</html>